<template>
  <div class="w-full h-full px-1.5 bg-sky-50">
    <!-- 标题 -->
    <div
      class="w-full h-14 flex justify-center items-center bg-blue-400 text-white"
    >
      <h1>{{ title }}</h1>
    </div>
    <div class="text-blue-400 font-bold flex" style="height: calc(100% - 56px)">
      <div class="p-1.5 flex flex-col justify-between" style="width: 14vw">
        <el-card class="custom-card" style="height: 27vh">
          <Title title="平均住院日" color="#0d208a" class="mt-3" />
          <ExpenseHospital class="w-14 h-14 ml-6 mt-3" style="fill: #0d208a" />
          <p class="relative -top-12 left-24">
            <span class="text-3xl">27954</span>
            <span class="text-lg">万</span>
          </p>
        </el-card>
        <el-card class="custom-card" style="height: 27vh">
          <Title title="床位周转次数" color="#09f222" class="mt-3" />
          <ExpenseTotal class="w-14 h-14 ml-6 mt-3" style="fill: #09f222" />
          <p class="relative -top-12 left-24">
            <span class="text-3xl">6422</span>
            <span class="text-lg">万</span>
          </p>
        </el-card>
        <el-card class="custom-card" style="height: 27vh">
          <Title title="床位使用率" color="#f8a459" class="mt-3" />
        </el-card>
      </div>
      <div class="p-1.5 flex flex-col justify-between" style="width: calc(100% - 14vw)">
        <el-card class="custom-card" style="height: 27vh">
        </el-card>
        <el-card class="custom-card" style="height: 27vh">
        </el-card>
        <el-card class="custom-card" style="height: 27vh">
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const title = ref<string>("住院效率分析");

import ExpenseTotal from "@/assets/svg/expense_total.svg?component";
import ExpenseOutpatient from "@/assets/svg/expense_outpatient.svg?component";
import ExpenseHospital from "@/assets/svg/expense_hospital.svg?component";
import ChinaMedicine from "@/assets/svg/china_medicine.svg?component";
import Medicine from "@/assets/svg/medicine.svg?component";

import Title from "./title.vue";
import LineChart from "./lineChart.vue";
import PieChart from "./pieChart.vue";
import BarChart from "./barChart.vue";
import Artboard from "@iconify-icons/ri/artboard-line";

// 住院费历史走势
const lineData = reactive<Array>([
  { name: "2023-05", value: 80 },
  { name: "2023-06", value: 75 },
  { name: "2023-07", value: 70 },
  { name: "2023-08", value: 63 },
  { name: "2023-09", value: 75 },
  { name: "2023-10", value: 79 },
  { name: "2023-11", value: 68 },
  { name: "2023-12", value: 82 },
  { name: "2024-01", value: 71 },
  { name: "2024-02", value: 69 },
  { name: "2024-03", value: 85 },
  { name: "2024-04", value: 78 }
]);

// 住院结构
const pieData = reactive<Array>([
  { name: "手术收入", value: 20.08 },
  { name: "物理治疗与康复费", value: 19.99 },
  { name: "西药费", value: 19.91 },
  { name: "治疗收入", value: 20.00 },
  { name: "中成药费", value: 20.02 }
]);
const position = reactive<Object>({
  pie: ["50%", "50%"],
  radius: ["55%", "70%"],
  legend: "5%"
});
const showLabel = ref<Boolean>(true);
const showLegend = ref<Boolean>(false);

// 住院科室排名TOP10
const barData = reactive<Array>([
  { name: "外科", value: 8000 },
  { name: "中医科", value: 7512 },
  { name: "内科", value: 7267 },
  { name: "神经科", value: 7032 },
  { name: "儿科", value: 6389 },
  { name: "感染科", value: 5813 },
  { name: "肿瘤科", value: 5554 },
  { name: "全科医学门诊", value: 5290 },
  { name: "急诊科", value: 5090 },
  { name: "麻醉科门诊", value: 4800 }
]);
</script>

<style scoped lang="scss">
.exp1 {
  fill: #0d208a !important;
}
</style>
